<template>
  <div v-loading="loading">
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="psInfo.avatar"></div>
      <div class="dashboard-workplace-header-tip">
        <p class="dashboard-workplace-header-tip-title">{{psInfo.name | filterEmpty  }}</p>
        <div class="dashboard-workplace-header-tip-desc">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">手机号: {{ psInfo.phoneNumber | filterEmpty}}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">身份证号: {{ psInfo.idCard | filterEmpty}}</span>
        </div>
        <div class="dashboard-workplace-header-tip-desc">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">积分额：{{psInfo.integral}}</span>
        </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData.data" class="tabNumWidth"  v-loading="loading" max-height="400" style="width: 100%">
          <el-table-column prop="title" label="来源/用途" min-width="250"></el-table-column>
          <el-table-column prop="statusText" label="状态" min-width="80" align="center">
            <template slot-scope="scope">
              <span :style="'color:'+handleGetLightColor(scope.row.status)">{{scope.row.statusText | filterEmpty}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="integralText" label="积分变化" min-width="80" align="center"></el-table-column>
          <el-table-column prop="afterIntegral" label="变化后积分" min-width="80" align="center"></el-table-column>
          <el-table-column prop="createTime" label="日期" min-width="100" align="center"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[6, 12, 18, 24]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getBehindUser, getBehindUserById } from '@/api/user'
  import { getLightColor } from '@/utils'
  export default {
    name: "UserDetails",
    props:{
      id: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        loading: false,
        columns: [],
        Visible: false,
        list: [
          { val: '0', label: '积分明细' },
        ],
        tableData: {
          data: [],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 6,
          type : '0',
          userId : '',
          id:null
        },
        psInfo: {},
      }
    },
    mounted(){
      if(this.id){
        this.getInfo();
        this.changeType(this.tableFrom.type)
        this.tableFrom.id=this.id
      }
    },
    methods: {
      close() {
        this.$emit('close')
      },
      handleGetLightColor(status){
        return getLightColor(status)
      },

      changeType(key) {
        this.tableFrom.type = key
        if(key === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      integral() {
        this.loading = true
        this.tableFrom.id=this.id
        getBehindUser( this.tableFrom).then(res => {
          this.tableData.data = res.list
          this.tableData.total = res.count

          this.columns = [
            {
              title: '来源/用途',
              key: 'typeText',
              minWidth: 120
            },
            {
              title: '积分变化',
              key: 'integral',
              minWidth: 120
            },
            {
              title: '变化后积分',
              key: 'afterIntegral',
              minWidth: 120
            },
            {
              title: '日期',
              key: 'createTime',
              minWidth: 120
            },
          ]
          this.loading = false
        }).catch(res => {
          this.loading = false
        })
      },
      getInfo() {
        this.tableFrom.id = this.id
        this.loading = true
        getBehindUserById(this.tableFrom).then(res => {
          this.psInfo = res
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },

      pageChange(page) {
        this.tableFrom.page = page
        if(this.tableFrom.type === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        if(this.tableFrom.type === '0'){
          this.integral()
        }else{
          this.getInfo()
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .dashboard-workplace {
    &-header {
      &-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 16px;
        font-weight: 600;
      }

      &-tip {
        width: 82%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -12px;
        &-title {
          font-size: 13px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 18px;
          padding: 10px 0 10px;
        }

        &-desc {
          &-sp {
            width: 32%;
            color: #17233D;
            font-size: 13px;
            display: inline-block;
          }
        }
      }

      &-extra {
        .ivu-col {
          p {
            text-align: right;
          }

          p:first-child {
            span:first-child {
              margin-right: 4px;
            }

            span:last-child {
              color: #808695;
            }
          }

          p:last-child {
            font-size: 22px;
          }
        }
      }
    }
  }
  .pb-1{
    padding-bottom: 10px;
  }
  .mr20{
    margin: 0 20px;
  }
  .border_bottom{
    border-bottom: 1px solid #E7EAEC;
  }
  .pb-24{
    padding-bottom: 24px;
  }
  .pictrue{
    width: 250px;
    height: 180px;
    border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    .photo-el-image{
      width: 100%;
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
    }
    video{
      width: 100%;
      height: 100%;
    }
  }
</style>
